<template>
  <div>
    <div id="allmap"></div>
    <div class="point" @click="getCurrentCity">
      <img src="../assets/定位@2x.png" alt="" />
    </div>
  </div>
</template>

<script>
// import BMap from 'BMap';

import getCurrentCityName from "../../getUserLocation";
export default {
  name: "ditu",
  data() {
    return {};
  },
  mounted() {
    this.getAdress();
    // this.getCurrentCity()
  },
  methods: {
    getAdress() {
      // 百度地图API功能
      var map = new BMap.Map("allmap"); // 创建Map实例
      var point = new BMap.Point(113.63700343594543, 34.756894815886504); //经纬度
      map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      // map.addControl(new BMap.GeolocationControl({
      //     mapTypes:[
      //         BMAP_NORMAL_MAP,
      //         BMAP_HYBRID_MAP
      //     ]}));

      // var opts = {
      //     width : 200,     // 信息窗口宽度
      //     height: 100,     // 信息窗口高度
      //     title : "~~~~~" , // 信息窗口标题
      //     message:"`~~~"
      // };
      // var infoWindow = new BMap.InfoWindow("&nbsp;&nbsp;&nbsp;地址：", opts);  // 创建信息窗口对象
      // map.openInfoWindow(infoWindow, point); //开启信息窗口
      // marker1.addEventListener("click", function(){
      //     map.openInfoWindow(infoWindow, point); //开启信息窗口
      // });

      var myicon = new BMap.Icon(
        require("../assets/定位图标@2x.png"),
        new BMap.Size(45, 62)
      );
      var marker = new BMap.Marker(point, { icon: myicon }); //初始化地图标记
      marker.enableDragging(); //标记开启拖拽

      var gc = new BMap.Geocoder(); //地址解析类
      //添加标记拖拽监听
      marker.addEventListener("dragend",  (e)=> {
        //获取地址信息
        gc.getLocation(e.point,  (rs)=> {
          this.showLocationInfo(e.point, rs);
        });
      });

      //添加标记点击监听
      marker.addEventListener("click",  (e) =>{
        gc.getLocation(e.point, (rs)=> {
          this.showLocationInfo(e.point, rs);
        });
      });

      map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
      map.addOverlay(marker); //将标记添

      // 通过点击获取点击的经纬度
      // map.addEventListener("click", function (e) {
      //   var point = new BMap.Point(113.63700343594543, 34.756894815886504); //经纬度
      //   map.centerAndZoom(point, 13);
      //   map.clearOverlays();

      //   var myicon = new BMap.Icon(
      //     require("../assets/定位图标@2x.png"),
      //     new BMap.Size(45, 62)
      //   );
      //   //创建点标记
      //   var marker1 = new BMap.Marker(
      //     new BMap.Point(e.point.lng, e.point.lat),
      //     { icon: myicon }
      //   );
      //   // 在地图上添加点标记
      //   map.addOverlay(marker1);
      //   //  alert('你当前的位置是:'+e.point.lng + ", " + e.point.lat);

      //   console.log("你当前的位置是:" + e.point.lng + "," + e.point.lat);
      // });

      // var myicon = new BMap.Icon(
      //   require("../assets/定位图标@2x.png"),
      //   new BMap.Size(45, 62)
      // );
      // //创建点标记
      // var marker1 = new BMap.Marker(new BMap.Point(113.63, 34.7568948158865), {
      //   icon: myicon,
      // });
      // 在地图上添加点标记
      // map.addOverlay(marker1);

      map.setCurrentCity("郑州"); // 设置地图显示的城市 此项是必须设置的
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true);
    },
    
    getCurrentCity() {
      getCurrentCityName().then((city) => {
        window.alert(city);
      });
    },

    showLocationInfo(pt, rs) {

      var map = new BMap.Map("allmap")

      var point = new BMap.Point(113.63700343594543, 34.756894815886504); //经纬度
      map.centerAndZoom(point, 15)


      var myicon = new BMap.Icon(
        require("../assets/定位图标@2x.png"),
        new BMap.Size(45, 62)
      );
      var marker = new BMap.Marker(point, { icon: myicon }); //初始化地图标记
      marker.enableDragging();
      var addComp = rs.addressComponents;
      var addr =
        "当前位置：" +
        addComp.province +
        ", " +
        addComp.city +
        ", " +
        addComp.district +
        ", " +
        addComp.street +
        ", " +
        addComp.streetNumber +
        "<br/>";
      addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
     

      var addrs =
      addComp.city +
        addComp.district +
        addComp.street 

      var numb=addComp.streetNumber
      
      this.$store.state.address=addrs
      this.$store.state.num=numb
      map.addOverlay(marker)
     var pln=pt.lat
     console.log(pln)
     var lan=pt.lng
     window.setTimeout(function(){  
    map.panTo(new BMap.Point(lan,pln));    
}, 1000);
    //  this.$store.commit("addressa",addr)
       console.log(addr)
    },
  },
};
</script>

<style scoped lang='less'>
#allmap {
  width: 100vw;
  height: 100vh;
}
.point {
  position: absolute;
  width: 9vw;
  height: 5vw;
  // border:1px solid red;
  margin-top: -75vw;
  margin-left: 3vw;
  img {
    display: block;
    width: 13vw;
    margin-top: -2vw;
    margin-left: -2vw;
  }
}
</style>
